<template>
    <el-card>
        <el-form :inline="true">
            <el-form-item label="一级分类">
                <el-select placeholder="请选择一级分类" class="selectItem">
                    <el-option v-for="item in categoryArr" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类">
                <el-select placeholder="请选择二级分类" class="selectItem">
                    <el-option v-for="item in categoryArr" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select placeholder="请选择三级分类" class="selectItem">
                    <el-option v-for="item in categoryArr" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>

    </el-card>
</template>

<script setup lang='ts' name='Category'>
import { ref } from 'vue';

let categoryArr = ref([
    {
        'name': '手机',
        'id': 1
    },
    {
        'name': '电脑',
        'id': 2
    },
    {
        'name': '平板电脑',
        'id': 3
    }
])


</script>

<style scoped lang='scss'>
.selectItem {
    width: 200px;
}
</style>